<template>
    <div>
        <el-row>
            <el-button type="primary" @click="toAddMenuDialog">新增</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" :default-expand-all="false"
            :tree-props="{ children: 'children' }">
            <el-table-column prop="label" label="名称">
            </el-table-column>
            <el-table-column prop="parentLable" label="上级菜单">
            </el-table-column>
            <el-table-column prop="icon" label="图标">
            </el-table-column>
            <el-table-column prop="order_num" label="排序号">
            </el-table-column>
            <el-table-column prop="path" label="菜单URL">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <AddMenuDialog ref="addMenuDialog" @refresh="refreshParentData" />
        <EditMenuDialog ref="editMenuDialog" @refresh="refreshParentData" />
    </div>
</template>

<script>
import api from '@/api/api.js';
import AddMenuDialog from './addMenuDialog.vue';
import EditMenuDialog from './editMenuDialog.vue';

export default {
    components: {
        AddMenuDialog,
        EditMenuDialog
    },
    data() {
        return {
            tableData: [],
        }
    },

    created() {
        this.getMuneTree();
    },

    methods: {
        getMuneTree() {
            api.post('/sys/getMuneTree')
                .then(response => {
                    this.tableData = response.data.muneTreeList
                })
                .catch(error => {

                });
        },
        toAddMenuDialog() {
            this.$refs.addMenuDialog.tableData = this.tableData;
            this.$refs.addMenuDialog.dialogFormVisible = true;
        },
        refreshParentData() {
            window.location.reload();
        },
        handleEdit(index, row) {
            this.$refs.editMenuDialog.tableData = this.tableData;
            this.$refs.editMenuDialog.form.id = row.id;
            this.$refs.editMenuDialog.form.label = row.label;
            this.$refs.editMenuDialog.form.parent_id = row.parent_id;
            this.$refs.editMenuDialog.form.parentLable = row.parentLable;
            this.$refs.editMenuDialog.form.icon = row.icon;
            this.$refs.editMenuDialog.form.order_num = row.order_num;
            this.$refs.editMenuDialog.form.path = row.path;
            this.$refs.editMenuDialog.form.url = row.url;
            this.$refs.editMenuDialog.dialogFormVisible = true;
        },
        handleDelete(index, row) {
            this.$alert('是否删除该菜单？', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action === 'confirm') {
                        api.post('/sys/updateMune', {
                            id: row.id,
                            sort: 'delete'
                        })
                            .then(response => {
                                console.log('删除成功', response.data.integer);
                                if (response.data.integer < 1) {
                                    this.$message({
                                        type: 'info',
                                        message: `删除失败`
                                    });
                                } else if (response.data.integer === 500) {
                                    this.$alert('请先删除子菜单!', '提示信息', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            this.$message({
                                                type: 'info',
                                                message: `删除失败`
                                            });
                                        }
                                    });
                                } else {
                                    this.$message({
                                        type: 'success',
                                        message: `删除成功`
                                    });
                                    setTimeout(() => {
                                        console.log('延迟3秒后执行');
                                    }, 3000); // 延迟3秒，3000毫秒
                                    window.location.reload();
                                }
                            })
                            .catch(error => {
                                alert('删除失败!');
                            });

                    } else if (action === 'cancel') {
                        console.log('用户关闭了弹窗');
                        this.$message({
                            type: 'info',
                            message: `已取消删除`
                        });
                    }
                }
            });

        }
    },

}
</script>

<style lang="less"></style>